<template>
    <div Id="MySet">
        <div class="title">
            <i class="iconfont iconzuojiantou" @click="getMy"></i>
            <span>设置</span>
            <i class="iconfont iconzuojiantou" style="color: rgba(0,0,0,0);"></i>
        </div>
        <div class="MySet-Two" @click="Autonym">
            <span>实名认证</span>
            <img src="../assets/Mymi/MySetRight.png" @click="Autonym">
        </div>
        <div class="MySet-Three" @click="Service">
            <span>服务条款</span>
            <img src="../assets/Mymi/MySetRight.png">
        </div>
        <div class="MySet-four" @click="Help">
            <span>帮助</span>
            <img src="../assets/Mymi/MySetRight.png">
        </div>
        <div class="MySet-five" @click="CleanCacheShow">
            <span>清除缓存</span>
            <span>{{cache}}</span>
        </div>
        <div class="MySet-six">
            <span>当前版本</span>
            <span>V{{version}}</span>
        </div>
        <div class="MySet-Three" @click="OnMi">
            <span>关于我们</span>
            <img src="../assets/Mymi/MySetRight.png">
        </div>
        <div class="MySet-button">
            <button @click="GetOut">退出登陆</button>
        </div>
         <div class="Box-Show" v-show="CacheShow">
            <div class ='Box-ShowBox'>
                <div class="Box-ShowBoxOne">
                    <span>清理缓存</span>
                </div>
                <div class="Box-ShowBoxTwo">
                    <span>当前缓存为{{cache}}</span>
                    <span>却认要清除缓存吗？</span>
                </div>
                <div class="Box-ShowBoxThree">
                    <span :style="CleanCacheColorNo" @click="Clean">否</span>
                    <span :style="CleanCacheColor" @click="Cache">是</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"MySet",
    data() {
        return {
            CacheShow: false,
            ShowBoxTwoText:"38.69MB",
            CleanCache:true,
            CleanCacheNo:false,
            cache:Math.random().toFixed(1)*10+'MB',
            version:''

        }
    },
    mounted() {
          // // 监听浏览器返回
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }
      this.version =plus.runtime.version
    },
    computed:{
        CleanCacheColor(){
            return this.CleanCache ? {color:"green"}:{};
        },
        CleanCacheColorNo(){
            return this.CleanCacheNo ? {color:"green"}:{};
        }
    },
    destroyed(){
        // 销毁监听浏览器事件
        window.removeEventListener('popstate', this.goBack, false);
    },
    methods: {
        getMy(){
            this.$router.push("/Mymi");
        },
        Autonym(){
            this.$router.push({path:"/Autonym",query:{theme:"实名认证",url:"/MySet"}});
        },
        //清除缓存
        CleanCacheShow(){
            this.CacheShow = true;
        },
        Clean(){
            this.CleanCache = false;
            this.CleanCacheNo = true;
            this.CacheShow = false;
        },
        Cache(){
            let aa = window.frames.getItem; 
            // console.log(this.aa)
            this.CleanCache = true;
            this.CleanCacheNo = false;
            this.CacheShow = false;
            this.cache = "0MB";
        },
        //退出
        GetOut(){
            this.$utils.authLogout()
            // localStorage.clear();
            localStorage.removeItem("token");
            localStorage.removeItem("key");
            // localStorage.setItem('wxprame','');
            // localStorage.setItem('key','');
            // localStorage.setItem('token','');
            this.$router.push("/login");
        },
        //服务条款
        Service(){
            this.$router.push({path:"/TermsOfService",query:{type:"10", value:"服务条款"}});
        },
        //帮助
        Help(){
            this.$router.push({path:"/TermsOfService",query:{type:"0", value:"帮助"}});
        },
        //关于我们
        OnMi(){
            this.$router.push({path:"/TermsOfService",query:{type:"20", value:"关于我们"}});
        },
        goBack(){
            this.$router.push("/Mymi");
        }
    },
}
</script>
<style lang="less" scoped>
#MySet{
    width: 100%;
    height: 100%;
    .title{
        width: 100%;
        font-size: 0.36rem;
        color:#333333;
        height: 1.25rem;
        line-height: 1.25rem;
        display: flex;
        justify-content: space-between;
        padding: 0 0.2rem;
        box-sizing: border-box;
        background: #FFFFFF;
        border-bottom: .02rem solid rgb(206, 206, 206);
    }
    .MySet-Two{
        width: 100%;
        height: 1rem;
        font-size: .28rem;
        line-height: 1rem;
        display: flex;
        border-bottom: .02rem solid rgb(206, 206, 206);
        background: white;
        span{
            margin-left: .3rem;
        }
        img{
            width: .12rem;
            height: .22rem;
            margin-left: 5.46rem;;
            margin-top: .39rem;
        }
    }
    .MySet-Three{
        width: 100%;
        height: 1rem;
        font-size: .28rem;
        line-height: 1rem;
        display: flex;
        border-bottom: .02rem solid rgb(206, 206, 206);
        background: white;
        span{
            margin-left: .3rem;
        }
        img{
            width: .12rem;
            height: .22rem;
            margin-left: 5.46rem;
            margin-top: .39rem;
        }
    }
     .MySet-four{
        width: 100%;
        height: 1rem;
        font-size: .28rem;
        line-height: 1rem;
        display: flex;
        border-bottom: .02rem solid rgb(206, 206, 206);
        background: white;
        span{
            margin-left: .3rem;
        }
        img{
            width: .12rem;
            height: .22rem;
            margin-left: 6.02rem;
            margin-top: .39rem;
        }
    }
     .MySet-five{
        width: 100%;
        height: 1rem;
        font-size: .28rem;
        line-height: 1rem;
        border-bottom: .02rem solid rgb(206, 206, 206);
        background: white;
        display: flex;
        span:nth-child(1){
            display: block;
            width: 5rem;
            height: 1rem;
            margin-left: .3rem;
        }
        span:nth-child(2){
            display: block;
            width: 2rem;
            height: 1rem;
            text-align: right;
            font-size: .32rem;
        }
    }
    .MySet-six{
        width: 100%;
        height: 1rem;
        font-size: .28rem;
        line-height: 1rem;
        border-bottom: .02rem solid rgb(206, 206, 206);
        background: white;
        span:nth-child(1){
            margin-left: .3rem;
        }
        span:nth-child(2){
            font-size: .32rem;
            margin-left: 4.98rem;
        }
    }
    .MySet-button{
        width: 100%;
        height: 3rem;
        font-family: "PingFang-SC-Medium";
        font-size: 0;
        button{
            font-size: .32rem;
            font-family: "PingFang-SC-Medium";
            color: #333333;
            width: 6.9rem;
            height: 1rem;
            background: rgb(219, 219, 219);
            margin: 1rem .3rem;
            border-radius: 0.2rem;
        }
    }
    .Box-Show{
        width: 100%;
        height: 337%;
        background: rgba(115,115,115,0.75);
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 10;
        .Box-ShowBox{
            width: 6.06rem;
            height: 3.74rem;
            background: #FFFFFF;
            margin: 50% auto;
            border-radius: 0.2rem; 
            font-size: 0rem;
            .Box-ShowBoxOne{
                width: 100%;
                height: 0.85rem;
                line-height: 0.85rem;
                span{
                    font-size: 0.48rem;
                    margin-left: 0.44rem;
                }
            }
            .Box-ShowBoxTwo{
                width: 100%;
                height: 1.52rem;
                // background: red;
                span{
                    display: block;
                    width: 3.2rem;
                    height: 0.76rem;
                    font-size: 0.32rem;
                    line-height: 0.76rem;
                    margin-left: 0.44rem;
                    color: #999999;
                }
            }
            .Box-ShowBoxThree{
                width: 100%;
                height: 1.37rem;
                line-height: 1.37rem;
                font-size: 0.24rem;
                span:nth-child(1){
                    margin-left: 4.34rem;
                }
                span:nth-child(2){
                    margin-left: .63rem;
                }
            }
        }
    }
}
</style>